<template>
  <div>
    <div class="nav_bar">
      <ul class="menu">
        <li
          class="bar"
          v-for="(item, index) in arr"
          :key="index"
          @mouseover="tabIndex = index"
          @mouseout="tabIndex = -1"
          :class="{ active: index == tabIndex }"
        >
          <a href="javascript:;">{{ item.name }}</a>
          <a
            href="javascript:;"
            v-for="(item, index) in item.children.slice(0, 2)"
            :key="index"
            >{{ item.name }}</a
          >
          <div class="laye" v-show="index == tabIndex">
            <h4>分类推荐<small>根据您的购买或浏览记录推荐</small></h4>
            <ul>
              <li
                class="fenlei"
                v-for="(item, index) in item.goods"
                :key="index"
              >
                <a href="javascript:;">
                  <img :src="item.picture" alt="" />
                  <div class="info">
                    <p>{{ item.name }}</p>
                    <p>{{ item.desc }}</p>
                    <p>
                      <i>￥</i><span>{{ item.price }}</span>
                    </p>
                  </div>
                </a>
              </li>
            </ul>
            <ul v-show="index == 9">
              <li
                v-for="(item, index) in brand"
                :key="index"
                :style="{ width: '260px', height: '200px', marginLeft: '20px' }"
              >
                <a href="javascript:;">
                  <img :src="item.picture" alt="" />
                  <div class="info">
                    <p>{{ item.place }}</p>
                    <p>{{ item.name }}</p>
                    <p>{{ item.desc }}</p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getBrand } from "@/request/api";

export default {
  data() {
    return {
      brand: [],
      arr: [],
      tabIndex: -1,
    };
  },
  mounted() {
    this.axios
      .get("https://apipc-xiaotuxian-front.itheima.net/home/category/head")
      .then((res) => {
        if (res.data.msg == "操作成功") {
          this.arr = res.data.result;
          this.arr.push({ name: "品牌", children: [{ name: "品牌推荐" }] });
        }
      });
    // this.axios
    //   .get("https://apipc-xiaotuxian-front.itheima.net/home/brand?limit=6")
    //   .then((res) => {
    //     if (res.data.msg == "操作成功") {
    //       this.brand = res.data.result;
    //     }
    //   });
  },
  methods: {
    async getBrand() {
      var res = await getBrand();
      if (res.data.msg == "操作成功") {
        this.brandList = res.data.result;
        console.log('in');
      }
    },
  },
};
</script>
<style scoped>
.active {
  background: #27ba9b;
}
</style>